<template>
    <div class="report-list" v-loading="loading">
        <div class="input-box">
            <el-input
                placeholder="请输入您要搜索的内容"
                clearable
                @keyup.enter.native="getList(1)"
                style="width:200px;"
                v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-select
                @change="getList(1)"
                style="margin-left:10px;width:150px"
                v-model="type">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="游戏举报" :value="1"></el-option>
                <el-option label="游戏点评举报" :value="2"></el-option>
                <el-option label="游戏点评回复举报" :value="3"></el-option>
                <el-option label="视频举报" :value="4"></el-option>
                <el-option label="视频点评举报" :value="5"></el-option>
                <el-option label="视频点评回复举报" :value="6"></el-option>
                <el-option label="游戏单评论举报" :value="7"></el-option>
                <el-option label="游戏单评论回复举报" :value="8"></el-option>
            </el-select>
            <el-select
                @change="getList(1)"
                style="margin-left:10px;width:100px"
                v-model="status">
                <el-option label="全部" :value="null"></el-option>
                <el-option label="未处理" :value="0"></el-option>
                <el-option label="已处理" :value="1"></el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="点评id">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="举报类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type === 1">游戏举报</span>
                        <span v-else-if="scope.row.type === 2">游戏点评举报</span>
                        <span v-else-if="scope.row.type === 3">游戏点评回复举报</span>
                        <span v-else-if="scope.row.type === 4">视频举报</span>
                        <span v-else-if="scope.row.type === 5">视频点评举报</span>
                        <span v-else-if="scope.row.type === 6">视频点评回复举报</span>
                        <span v-else-if="scope.row.type === 7">游戏单评论举报</span>
                        <span v-else-if="scope.row.type === 8">游戏单评论回复举报</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180"
                    prop="content"
                    label="举报内容">
                    <template slot-scope="scope">
                        <!-- 游戏 -->
                        <div v-if="scope.row.type === 1 || scope.row.type === 2 || scope.row.type === 3" class="game-content">
                            <div class="game-title" @click="toGame(scope.row.gameid)">{{scope.row.gamename}}</div>
                        </div>
                        <!-- 视频 -->
                        <div v-else-if="scope.row.type === 4 || scope.row.type === 5 || scope.row.type === 6" class="video-content">
                            <videoBox :url="scope.row.videoUrl" :time="scope.row.videoDuration" :img="scope.row.videoCover"/>
                            <div class="video-title" @click="toVideo(scope.row.videoid)">{{scope.row.videoTitle}}</div>
                        </div>
                        <div>{{scope.row.reason}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    prop="createTime"
                    label="发布时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type === 1">{{scope.row.gameCreateTime | timeNo0}}</span>
                        <span v-else-if="scope.row.type === 2">{{scope.row.commentCreateTime | timeNo0}}</span>
                        <span v-else-if="scope.row.type === 4">{{scope.row.videoCreateTime | timeNo0}}</span>
                        <span v-else-if="scope.row.type === 3 || scope.row.type === 7 || scope.row.type === 8">{{scope.row.createTime | timeNo0}}</span>
                        <span v-else>{{scope.row.videoCommentCreateTime | timeNo0}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="feedbackNum"
                    label="举报条数">
                </el-table-column>
                <el-table-column
                    width="200"
                    prop="reasonGroup"
                    label="最新举报内容">
                </el-table-column>
                <el-table-column
                    width="110"
                    label="举报时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime | timeNo0}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="110"
                    label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1" style="color:#67C23A;">已处理</span>
                        <span v-else>未处理</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 0"><el-button @click="disabledTalk(scope.row)" type="text" size="small" style="color:#F56C6C;">禁用</el-button></div>
                        <div><el-button @click="goReportDetail(scope.row.id)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keyword: '',
            type: null,
            status: null,
            gameId: '',
            tableData: [],
            gameList: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            gameLoading: false,
            loading: false,
            params: {}
        }
    },
    activated () {
        if (this.listParams) {
            this.keyword = this.listParams.keyword
            this.status = this.listParams.status
            this.type = this.listParams.type
        }
        this.getList(this.pageNum)
    },
    methods: {
        // 获取点评列表
        async getList (pageNum) {
            if (this.loading) return
            this.loading = true
            this.pageNum = pageNum
            this.listParams = {
                pageIndex: this.pageNum,
                pageNum: this.pageSize,
                keyword: this.keyword,
                type: this.type,
                status: this.status
            }
            // if (this.type) {
            //     this.listParams.type = this.type
            // }
            // if (this.keyword) {
            //     this.listParams.keyword = this.keyword
            // }
            // if (this.status !== 3) {
            //     this.listParams.status = this.status
            // }
            let res = await this.$http.post('/feedback/findFeedback', this.listParams)
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 页容切换
        sizeChange (num) {
            this.pageSize = num
            this.getList(1)
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
            this.getList(this.pageNum)
        },

        // 跳转至视频详情
        toVideo (id) {
            this.$router.push({
                path: '/video/videoDetail',
                query: {
                    id
                }
            })
        },

        // 查看游戏详情
        toGame (id) {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 更改视频状态
        async disabledTalk (item) {
            let params = {
                id: item.id
            }
            let res = await this.$http.post('/feedback/forbidFeedbackObj', params)
            if (res.code === '0') {
                item.status = 1
                this.$message({
                    type: 'success',
                    message: '禁用成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: ''
                })
            }
        },

        // 查看视频详情
        goReportDetail (id) {
            this.$router.push({
                path: '/report/reportDetail',
                query: {
                    id
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .report-list {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .app-icon {
                width: 60px;
                height: 60px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .game-content {
                .game-title {
                    font-size: 14px;
                    color: #409EFF;
                    cursor: pointer;
                }
            }

            .video-content {

                .video-title {
                    margin-top: 3px;
                    font-size: 14px;
                    color: #409EFF;
                    cursor: pointer;
                }
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
